<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<!-- #ifdef MP -->
			<view class="" :style="{'height':navTop+'px'}"></view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="status_bar"></view>
			<!-- #endif -->
			<view class="navTab">
				<text>分类</text>
				<view class="xian"></view>
			</view>
			<!--			<view class="searchInput">-->
			<!--				&lt;!&ndash; homePages/search &ndash;&gt;-->
			<!--				<view class="input" @click="goSearch">-->
			<!--					<image :src="$imgs.indexInput" mode=""></image>-->
			<!--					<input type="text" placeholder="搜索你想要的大神" placeholder-class="pClass" disabled />-->
			<!--				</view>-->
			<!--			</view>-->
			<view class="box">
				<view class="box-left">
					<scroll-view scroll-y="true" class="scroll-view">
						<view class="tab-list">
							<block v-for="(item,index) in tabList" :key="index">
								<view class="tab-list-item" @click="tabClick(index,item.id)">{{item.name}}</view>
							</block>
						</view>
					</scroll-view>
					<view class="bg-kuai" :style="{top:top+'px'}"></view>
				</view>
				<view class="box-right">
					<view class="filtrate tn-flex tn-flex-row-between">
						<view class="f-tab tn-flex tn-flex-col-center">
							<text class="label" @click="fData.sortShow = !fData.sortShow">{{fData.sortName}}</text>
							<image src="/static/index/sj1.png" mode="" v-if="!fData.sortShow"></image>
							<image src="/static/index/sj2.png" mode="" v-else></image>
							<!-- 筛选弹窗 -->
							<view v-show="fData.sortShow"
								class="filtrate-pop tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-around">
								<block v-for="(item,index) in sortList" :key="index">
									<text :class="[{'text-pitch':fData.sort == item.value}]"
										@click="conditionClick(item,1)">{{item.name}}</text>
								</block>
							</view>
						</view>
						<view class="f-tab tn-flex tn-flex-col-center">
							<text class="label" @click="fData.sexShow = !fData.sexShow">{{fData.sexName}}</text>
							<image src="/static/index/sj1.png" mode="" v-if="!fData.sexShow"></image>
							<image src="/static/index/sj2.png" mode="" v-else></image>
							<!-- 筛选弹窗 -->
							<view v-show="fData.sexShow"
								class="filtrate-pop tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-around">
								<block v-for="(item,index) in sexList" :key="index">
									<text :class="[{'text-pitch':fData.sex == item.value}]"
										@click="conditionClick(item,2)">{{item.name}}</text>
								</block>
							</view>
						</view>
						<view class="f-tab tn-flex tn-flex-col-center">
							<text class="label" @click="fData.priceShow = !fData.priceShow">{{fData.priceName}}</text>
							<image src="/static/index/sj1.png" mode="" v-if="!fData.priceShow"></image>
							<image src="/static/index/sj2.png" mode="" v-else></image>
							<!-- 筛选弹窗 -->
							<view v-show="fData.priceShow"
								class="filtrate-pop tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-around">
								<block v-for="(item,index) in priceList" :key="index">
									<text :class="[{'text-pitch':fData.price_sort == item.value}]"
										@click="conditionClick(item,3)">{{item.name}}</text>
								</block>
							</view>
						</view>
					</view>
					<view class="m-list">
						<scroll-view scroll-y="true" class="sv" @scrolltolower="scrolltolower">
							<manito-list :list="playList"></manito-list>
							<w-load-more ref="wLoadMore"></w-load-more>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				top: 0,
				tabList: [],
				itemNode: '',
				current: 0,
				countTop: 0,
				fData: {
					sortName: '智能排序',
					sort: 1,
					sortShow: false,
					sexName: '不限性别',
					sex: 0,
					sexShow: false,
					priceName: '不限价格',
					price_sort: '',
					priceShow: false,
					lng: '',
					lat: '',
					game_id: '',
					page: 1
				},
				sortList: getApp().globalData.isAuditVersion ? [{
						name: '智能排序',
						value: '1'
					},
					{
						name: '人气优先',
						value: '3'
					}
				] : [{
						name: '智能排序',
						value: '1'
					},
					{
						name: '距离优先',
						value: '2'
					},
					{
						name: '人气优先',
						value: '3'
					},
					// {
					// 	name: '同城优先',
					// 	value: '4'
					// }
				],
				sexList: [{
						name: '不限性别',
						value: '0'
					},
					{
						name: '限男生',
						value: '1'
					},
					{
						name: '限女生',
						value: '2'
					},
				],
				priceList: [{
						name: '不限价格',
						value: ''
					},
					{
						name: '从高到低',
						value: 'desc'
					},
					{
						name: '从低到高',
						value: 'asc'
					},
				],
				fShowList: [false, false, false],
				playList: [],
				show: false,
				navTop: 0, //微信小程序胶囊按钮top
			}
		},
		onLoad() {
			this.getGame()

			// let token = uni.getStorageSync('token')
			// if (token) {
			// 	this.getLocation()
			// }
			// #ifdef MP
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.navTop = menuButtonInfo.top
			// #endif
		},
		onReady() {
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.tab-list-item').boundingClientRect(data => {
					this.itemNode = data
					this.countTop = data[0].top
					this.top = data[this.current].top - this.countTop
				}).exec();
			}, 500)
		},
		methods: {
			async getGame() {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: '/api/play_game/game'
					})
					this.tabList = result.data.data
					this.fData.game_id = this.tabList[0].id
					this.playIndex(1)
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			async playIndex(loading) {
				try {
					let result = await this.$request({
						loading,
						method: 'post',
						url: '/api/play_index/index',
						data: {
							...this.fData
						}
					})
					let data = result.data.data
					if (this.fData.page == 1) {
						this.playList = data
						this.show = true
					} else {
						this.$refs['wLoadMore'].setNomore()
						this.playList = this.playList.concat(data)
						if (data.length == 0) {
							this.fData.page--
						}
					}
				} catch (e) {
					this.msg(e.data.msg)
					//TODO handle the exception
				}
			},
			scrolltolower() {
				if (this.playList.length < 20) return
				this.fData.page++
				this.$refs['wLoadMore'].setLoading()
				this.playIndex()
			},

			// // 获取位置
			// handleGetLocation() {
			// 	return new Promise((resolve, reject) => {
			// 		uni.showLoading({
			// 			title: "定位中...",
			// 		})
			// 		uni.getLocation({
			// 			type: this.$isIos ? "wgs84" : "gcj02",
			// 			geocode: true,
			// 			success: (res) => {
			// 				uni.hideLoading()
			// 				console.log('=位置=', res)
			// 				this.fData.lat = res.latitude
			// 				this.fData.lng = res.longitude
			// 				resolve()
			// 			},
			// 			fail: (err) => {
			// 				console.log('错误', err)
			// 				reject()
			// 				uni.hideLoading()
			// 				uni.showToast({
			// 					title: "无法获取您的定位",
			// 					icon: 'none',
			// 					duration: 2000
			// 				})
			// 			}
			// 		})
			// 	})
			// },
			tabClick(e, id) {
				this.current = e
				this.top = this.itemNode[this.current].top - this.countTop
				this.fData.game_id = id
				this.fData.page = 1
				setTimeout(() => {
					this.playIndex(1)
				}, 400)

			},
			conditionClick(item, type) {
				if (type == 1) {
					getApp().handleSysGetLocation().then(res=>{
						this.fData.lat = res.latitude
						this.fData.lng = res.longitude
					}).finally(()=>{
						this.fData.sort = item.value
						this.fData.sortName = item.name
						this.fData.sortShow = false
					})

				} else if (type == 2) {
					this.fData.sex = item.value
					this.fData.sexName = item.name
					this.fData.sexShow = false
				} else if (type == 3) {
					this.fData.price_sort = item.value
					this.fData.priceName = item.name
					this.fData.priceShow = false
				}
				this.fData.page = 1
				this.playIndex(1)
			},
			goSearch() {
				uni.navigateTo({
					url: "/homePages/search"
				})
			}
		}
	}
</script>
<style lang="scss">
	/* #ifdef APP-PLUS */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	/* #endif */
	page {
		background: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.content {
		background: url("../../static/top-bg.png") no-repeat;
		background-size: 100% 250px;

		.navTab {
			height: 88rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-end;
			padding-left: 30rpx;

			text {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 23rpx;
			}

			.xian {
				width: 26rpx;
				height: 8rpx;
				background: linear-gradient(90deg, #080808 0%, #080808 100%);
				border-radius: 60rpx;
				justify-self: flex-end;
			}
		}

		.searchInput {
			height: 128rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.input {
				width: 690rpx;
				height: 72rpx;
				background: #f3f2f5;
				border-radius: 12rpx;
				padding: 0 24rpx;
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 26rpx;
					margin-right: 16rpx;
				}

				input {
					color: $uni-text-color;
				}
			}

			.pClass {
				color: $uni-input-placeholder-color;
				font-size: 28rpx;
			}
		}

		.box {
			// #ifdef APP
			height: 100vh;
			// #endif
			// #ifndef APP
			height: calc(100vh - 95px);
			// #endif
			display: flex;

			.box-left {
				width: 199rpx;
				height: 100%;
				background-color: #f3f2f5;
				position: relative;

				.scroll-view {
					height: 100%;
					position: absolute;
					top: 0;
					z-index: 10;

					.tab-list {
						.tab-list-item {
							width: 100%;
							height: 88rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #333333;
							text-align: center;
							line-height: 88rpx;

						}
					}
				}

				.bg-kuai {
					position: absolute;
					width: 100%;
					height: 88rpx;
					//background: linear-gradient(270deg, #DB89F5 0%, #834BF4 100%);
					background: linear-gradient(270deg, #ffffff 0%, #ffffff 100%);
					transition: top .3s;
				}
			}

			.box-right {
				flex: 1;
				padding-left: 24rpx;
				padding-right: 30rpx;
				display: flex;
				flex-direction: column;

				.filtrate {
					height: 89rpx;

					.f-tab {
						position: relative;

						.label {
							display: inline-block;
							width: 120rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #333333ad;
							text-align: center;
						}

						image {
							width: 14rpx;
							height: 7rpx;
						}

						.filtrate-pop {
							position: absolute;

							left: 0rpx;
							width: 148rpx;
							// height: 210rpx;
							background: #f7f7f7;
							border-radius: 4px;
							z-index: 1;
							top: 85upx;

							text {
								font-size: 24rpx;
								font-weight: 500;
								color: #333333d6;
								height: 60rpx;
								line-height: 60rpx;
							}

							.text-pitch {
								//color: #D082D4;
								font-weight: bold;
							}
						}

						.filtrate-pop::before {
							content: "";
							width: 0px;
							height: 0px;
							border-left: 12rpx solid transparent;
							border-right: 12rpx solid transparent;
							border-bottom: 20rpx solid #f7f7f7;
							position: absolute;
							top: -20rpx;
							left: 50%;
							transform: translateX(-50%);

						}
					}
				}

				.m-list {
					// flex: 1;
					height: calc(100% - 37px);

					.sv {
						height: 100%;
					}

					/deep/.manito-list {
						//padding: 0;
						background-color: transparent;
						align-items: flex-start;

						.avatar {
							width: 144rpx;
							height: 144rpx;
						}


						.left {
							height: fit-content;
						}

						.right {
							height: auto;

							.top {
								.name {
									width:220rpx;
								}
							}

						}

						.bottom {
							position: relative;
							flex-wrap: wrap;

							.game-type {
								flex: auto;
								width: 270rpx;
							}

							.price {
								//margin: 24rpx 0;
								position: absolute;
								right: 0;
								top: -25px;
							}
						}
					}


				}
			}
		}
	}
</style>